<template>
  <view class="container">
    <!-- 第一个模块：选择简历区域 -->
    <view class="module resume-select">
      <view class="resume-select-content">
        <!-- 模块头部：标题+圆圈加号按钮 -->
        <view class="select-header">
          <text class="select-title">选择简历</text>
          <button class="add-btn" @click="selectResume">+</button>
        </view>

        <!-- 简历卡片列表（保持不变） -->
        <view class="resume-cards">
          <!-- 示例卡片（实际通过v-for渲染） -->
          <view class="resume-card" v-for="(item, index) in resumeList" :key="index">
            <!-- 左边圆圈勾号 -->
            <view class="check-circle"  :class="{ active: item.isSelected }"  @click="toggleSelect(item)" >✓</view>
            
            <!-- 中间内容区域 -->
            <view class="card-content">
              <text class="position">{{ item.position }}</text>
              <text class="update-time">更新于：{{ item.updateTime }}</text>
            </view>

            <!-- 预览按钮 -->
            <button class="preview-btn" @click="previewResume">预览</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 第二个模块：测评分析结果（保持结构不变） -->
    <view class="module analysis-result">
      <text class="module-title">测评分析结果</text>
      <view class="analysis-content">
        <!-- 填充死数据 -->
        <text>综合评分：85/100</text>
        <text>优势项：项目经验丰富（3个完整项目）</text>
        <text>改进建议：补充技能证书（建议考取PMP/前端工程师认证）</text>
        <text>匹配岗位：互联网产品经理、前端开发工程师</text>
      </view>
    </view>

    <!-- 第三个模块：操作按钮组 -->
    <view class="module button-group">
      <button class="operate-btn">加入我的简历</button>
      <button class="operate-btn">预览</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 新增简历列表示例数据
      resumeList: [
        { position: "前端开发工程师", updateTime: "2024-03-20",isSelected: false },
        { position: "产品经理实习生", updateTime: "2024-03-15",isSelected: false },
        { position: "数据分析师", updateTime: "2024-03-10",isSelected: false }
      ]
    }
  },
  methods: {
    toggleSelect(item) {
      item.isSelected = !item.isSelected
    },
    // 新增点击事件（示例）
    selectResume() {
      // 选择简历逻辑（如调用文件选择API）
    },
    previewResume() {
      // 预览简历逻辑（如跳转详情页）
    }
  }
}
</script>

<style scoped>
/* 新增/修改样式 */
.resume-select-content {
  height: 100%; /* 继承模块高度 */
  display: flex;
  width: 150%;
  flex-direction: column;
}

.select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx; /* 标题与卡片间距 */
}

.select-title {
  font-size: 36rpx; /* 比原标题更大 */
  font-weight: bold;
  color: #333;
}

/* 调整选择简历模块样式 */
.module {
  /* 保持原有边距和圆角（已满足需求） */
  padding: 24rpx;        
  border-radius: 16rpx;   /* 四周圆角 */
  margin-bottom: 40rpx; 
}

/* 圆圈加号按钮样式 */
.add-btn {
  width: 64rpx;           /* 正方形尺寸 */
  height: 64rpx;
  line-height: 64rpx;     /* 垂直居中 */
  border-radius: 50%;     /* 圆圈效果 */
  font-size: 48rpx;       /* 加号大小 */
  color: #fff;            /* 白色加号 */
  background: #409eff;    /* 主题色背景 */
  padding: 0;             
  flex-shrink: 0; 
  right: 0;
  
}
.preview-btn {
  position: absolute;
  width: 100rpx;         /* 原120rpx缩小为100rpx */
  height: 48rpx;         /* 原56rpx缩小为48rpx */
  line-height: 48rpx;    /* 保持文字垂直居中 */
  font-size: 22rpx;      /* 原24rpx缩小为22rpx */
  border-radius: 24rpx;  /* 大圆角（高度的一半，保持椭圆状） */
  /* 其他样式保持 */
  color: #409eff;
  background: #e6f4ff;
  padding: 0;
  right:50rpx;
}
/* 测评分析结果模块样式（保持原有圆角和边距） */
.analysis-result {
  /* 继承.module的padding和border-radius */
  height: 33.33vh;       /* 保持高度 */
  box-sizing: border-box;
}

/* 其他未修改样式保持不变... */
.resume-cards {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  gap: 24rpx; /* 卡片间垂直间距 */
 
}

.resume-card {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx; 
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); 
}

.check-circle {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  border: 2rpx solid #999;
  border-radius: 50%; /* 圆圈 */
  color: #999;
  font-size: 28rpx;
  margin-right: 24rpx;
  flex-shrink: 0; /* 固定大小不收缩 */
}
.check-circle.active {
  border: 2rpx solid #409eff;  /* 蓝色边框 */
  background: #409eff;      /* 新增：蓝色背景 */
  color: #fff;    
}

.card-content {
  flex: 1; /* 占据中间主要空间 */
  margin-right: 24rpx;
  display: flex;          /* 新增：启用flex布局 */
  flex-direction: column; /* 子元素纵向排列 */
  justify-content: center;
}

.position {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 16rpx;
   /* 职位与时间间距 */
}

.update-time {
  position: static;
  display: block;
  font-size: 20rpx;
  color: #999;
  /* right:200rpx; */
  
}

.analysis-content {
  height: 100%;           /* 占满模块高度 */
  overflow-y: auto;       /* 内容过长时滚动 */
  padding: 24rpx;         /* 内容区边距 */
  background: #f8f9fc;    /* 与上传模块背景色统一 */
  border-radius: 12rpx;   /* 内容区圆角（略小于模块整体圆角） */
}

/* Markdown富文本基础样式（根据实际解析需求调整） */
.analysis-content rich-text {
  font-size: 28rpx;  
  color:#409eff;
  font-weight:28rpx;     
  line-height: 1.6;       
  color: #666;            
}
.analysis-content rich-text text {  /* 兼容普通文本 */
  display: block;
  margin-bottom: 16rpx;
}
.analysis-content rich-text view {  /* 兼容块级元素 */
  margin: 12rpx 0;
}
.module-title {
  font-weight: bold;        /* 新增：加粗 */
  color: #409eff;           /* 新增：主题蓝色 */
}

/* 原有模块基础样式保持不变 */
.module {
  width: 100%;
  margin-bottom: 20rpx;   /* 模块间边距 */
  padding: 24rpx;         /* 模块内边距 */
  background: #fff;
  border-radius: 16rpx;   /* 四周圆角 */
}
.button-group {
  display: flex;          
  justify-content: center;
  gap: 10rpx;             
  background: transparent;
  padding:0rpx;
  padding-top: 100rpx;
  
}

.operate-btn {
  width: 300rpx;
  height: 100rpx;
  background-color: #409eff;
  color: #fff;
  line-height: 100rpx;
  font-size: 28rpx;
  border-radius: 16rpx;   /* 按钮圆角 */
}

</style>
